body {
  /*padding-top: 50px; */
}

.navbar-brand {
  background: url("../img/angular32.jpeg") left center no-repeat;
  padding-left: 38px;
  margin-left: 0 !important;
}

@media screen and (max-width: 750px) {
  .sidebar {
    position: static;
    margin-top: 65px;
    width: 100%;
  }
}

@media screen and (max-width: 970px) {
  #socials {
    display: none;
  }
}

@media screen and (min-width: 750px) {
  .sidebar {
    position: fixed;
    top: 65px;
    width: 170px;
  }
}

@media screen and (min-width: 970px) {
  .sidebar {
    width: 220px;
  }
}

.sidebar > .nav > li > a {
  padding: 5px 15px 5px 5px;
  font-size: 1.2em;
}

.sidebar > .nav > li > .nav > li > a {
  padding: 5px 15px 5px 15px;
  font-size: .9em;
}

.sidebar li.active > a {
  color: #2a6496;
  font-weight: bold;
}

@media screen and (min-width: 750px) {
  .sidebar > .nav > li > .nav {
    /*display: none;*/
    height: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: max-height 0.5s ease-in, opacity 0.3s ease-out;
    /*
     height: auto can't use transitions
     http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto
    */
    /*-webkit-transition: height 0.5s ease-out;*/
  }

  .sidebar > .nav > li.active > .nav {
    display: block;
    height: auto;
    max-height: 400px;
    opacity: 1;
  }
}

@media screen and (max-width: 750px) {
  .sidebar > .nav > li > .nav {
    display: none;
  }
}


/* overwrite ugly google-prettify style */
pre.prettyprint {
  padding: 10px !important;
  border: 1px solid #cccccc !important;
}

.line-example {
  min-height: 75px;
}


.fiddle {
  margin: 19px;
}

form[name="editableForm"] > div {
  height: auto;
  padding: 5px 0;
}

form[name="editableForm"] .title {
  display: inline-block;
  font-weight: bold;
  padding-top: 5px;
  vertical-align: top;
  min-width: 90px;
}

form[name="editableForm"] .editable {
  display: inline-block;
  padding-top: 5px;
  vertical-align: top;
}

form[name="editableForm"] select {
  width: 118px;
}

div[ng-controller] table tr td {
  height: 45px;
  /*text-align: center;*/
  vertical-align: middle;
}

div[ng-controller="EditableRowCtrl"] table,
div[ng-controller="EditableColumnCtrl"] table,
div[ng-controller="EditableTableCtrl"] table {
  width: 80%;
  margin-bottom: 5px;
}

div[ng-controller="EditableTableCtrl"] .btn-edit,
div[ng-controller="EditableTableCtrl"] .btn-form {
   white-space: nowrap;
   width: 80%;
}

div[ng-controller="Html5InputsCtrl"] > div {
   height: 35px;
   line-height: 35px;
}

div[ng-controller="Html5InputsCtrl"] > div > * {
   vertical-align: middle;
}

section {
  padding-top: 40px;
}

footer {
  text-align: center;
}

/* temporary workaround for display editable-bstime in bs3 - up/down symbols not shown */
.editable-bstime .editable-input i.icon-chevron-up:before {
  content: '\e113';
}
.editable-bstime .editable-input i.icon-chevron-down:before {
  content: '\e114';
}
.editable-bstime .editable-input i.icon-chevron-up,
.editable-bstime .editable-input i.icon-chevron-down {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

/* editable-bstime doc fixes*/
.uib-timepicker tr td {
  height: 34px !important;
}

@media screen and (max-width: 414px) {
  div#TextSimpleCtrl input {
    width: 105px;
  }

  div#Html5InputsCtrl input[type=email], div#Html5InputsCtrl input[type=tel] {
    width: 137px;
  }
  
  div#TextareaCtrl textarea {
    width: 179px;
  }

  div#TextCustomizeCtrl input {
    width: 207px;
  }

  div#ValidateLocalCtrl input, div#ValidateRemoteCtrl input, div#OnbeforesaveCtrl input, div#OnaftersaveCtrl input {
    width: 122px;
  }

  div#EditableFormCtrl input {
    width: 118px;
  }
    
  section#text-simple .fiddle, section#html5-inputs .fiddle, section#textarea .fiddle,
  section#text-btn .fiddle {
    margin: 19px 0 19px 0;
  }

  section#text-simple .well, section#html5-inputs .well, section#textarea .well,
  section#text-btn .well {
    padding: 19px 0 19px 0;
  }
}


@media screen and (max-width: 360px) {
  div#TextSimpleCtrl input {
    width: 50px;
  }
  
  div#Html5InputsCtrl input[type=email], div#Html5InputsCtrl input[type=tel] {
    width: 82px;
  }

  div#TextareaCtrl textarea {
    width: 124px;
  }

  div#TextCustomizeCtrl input {
    width: 150px;
  }

  div#TextBtnCtrl input {
    width: 124px;
  }

  div#ValidateLocalCtrl input, div#ValidateRemoteCtrl input, div#OnbeforesaveCtrl input, div#OnaftersaveCtrl input {
    width: 67px;
  }

  div#EditableFormCtrl input {
    width: 63px;
  }
  
  form[name="editableForm"] select {
    width: 63px;
  }
}